<script>
import {VueCropper} from "vue-cropper";
import Request from "@/api/request";

export default {
  name: "PictureWrap",
  components: {VueCropper},
  props: {
    img: String
  },
  data() {
    return {
      flag: 'https://img.okay.do/a82c19d3cec2dd05ce7dd4ec821bf8e3_W1190_H1684_G0',
      filelist: [],
      uuid: null,
      previews: {},
      option: {
        img: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80', //裁剪图片的地址
        outputSize: 1,       //裁剪生成图片的质量(可选0.1 - 1)
        outputType: 'png',  //裁剪生成图片的格式（jpeg || png || webp）
        info: true,          //图片大小信息
        canScale: true,      //图片是否允许滚轮缩放
        autoCrop: false,      //是否默认生成截图框
        fixed: true,         //是否开启截图框宽高固定比例
        fixedNumber: [0.706, 1], //截图框的宽高比例
        full: false,         //false按原比例裁切图片，不失真
        fixedBox: false,      //固定截图框大小，不允许改变
        canMove: false,      //上传图片是否可以移动
        canMoveBox: true,    //截图框能否拖动
        original: false,     //上传图片按照原始比例渲染
        centerBox: false,    //截图框是否被限制在图片里面
        height: true,        //是否按照设备的d pr 输出等比例图片
        infoTrue: false,     //true为展示真实输出图片宽高，false展示看到的截图框宽高
        maxImgSize: 3000,    //限制图片最大宽度和高度
        enlarge: 1,          //图片根据截图框输出比例倍数
        mode: 'contain', //图片默认渲染方式 	contain , cover, 100px, 100% auto
        limitMinSize: 10,	//裁剪框限制最小区域	10	Number, Array, String
        fillColor: ''    //导出时背景颜色填充
      },
    }
  },
  methods: {
    uploadFile() {
      console.log(this.filelist)
      // Request.postForm("file", {multipartFile: this.filelist[0].raw})
    },
    //初始化函数
    imgLoad(msg) {
      console.log("工具初始化函数=====" + msg)
    },
    //图片缩放
    changeScale(num) {
      num = num || 1
      this.$refs.cropper.changeScale(num)
    },
    //向左旋转
    rotateLeft() {
      this.$refs.cropper.rotateLeft()
    },
    //向右旋转
    rotateRight() {
      this.$refs.cropper.rotateRight()
    },
    //实时预览函数
    realTime(data) {
      this.previews = data
    },
    getCropBlob() {
      this.$refs.cropper.getCropBlob(data => {
        // do something
        console.log(data)
      })
    },
    imgMoving() {
    },
    onchange(file, fileList) {
      this.fileList = []
      this.fileList.push(file)
      var formData = new FormData
      formData.append("multipartFile", file.raw)
      Request.post("file", formData).then(res => {
        this.uuid = res.data.uuid
        this.$emit('list', res.data.images)
      })

    }
  }
}

</script>

<template>

  <div class="cropper-content">
    <el-upload
        v-show="img==flag"
        class="upload"
        :auto-upload="false"
        action=""
        :file-list="filelist"
        drag
        :http-request="uploadFile"
        :on-change="onchange"

        multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <div class="cropper">
      <VueCropper
          ref="cropper"
          :img="img"
          outputSize="1"
          :outputType="option.outputType"
          :info="option.info"
          :canScale="option.canScale"
          :autoCrop="option.autoCrop"
          :fixed="option.fixed"
          :fixedNumber="option.fixedNumber"
          :full="option.full"
          :fixedBox="option.fixedBox"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :centerBox="option.centerBox"
          :height="option.height"
          :infoTrue="option.infoTrue"
          :maxImgSize="option.maxImgSize"
          :enlarge="option.enlarge"
          :mode="option.mode"
          @realTime="realTime"
          @imgLoad="imgLoad"
          @imgMoving="imgMoving"
      >
      </VueCropper>
    </div>
    <!--底部操作工具按钮-->
    <div class="footer-btn">

      <el-button size="mini" plain icon="el-icon-zoom-in" @click="changeScale(1)">放大</el-button>
      <el-button size="mini" plain icon="el-icon-zoom-out" @click="changeScale(-1)">缩小</el-button>
      <el-button size="mini" plain @click="rotateLeft">↺ 左旋转</el-button>
      <el-button size="mini" plain @click="rotateRight">↻ 右旋转</el-button>

    </div>
  </div>


</template>
<style scoped>
.cropper-content {
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: center;
  height: 100%;
}

.upload {
  text-align: center;
}

.cropper {
  box-sizing: border-box;
  background-color: #efefef;
  flex: 1;
}

.vue-cropper {
  background-image: unset;
}

</style>